<template>
  <div>
    <div class="usercenter-wrapper">
      <a v-if="this.sign_in == 0" class="username-wrapper" @click="direct">
        <div class="user-icon"></div>
    		<div class="username-main">
    			<div class="name ellipsis"><span>登录 / 注册</span></div>
    		</div>
    		<div class="next-main">
    			<div>
	    			<!-- <a class="login-wrap" :href="'#/oauth/login'">
	    				<span>登陆/注册</span>
	    				<i class="next-icon"></i>
	    			</a> -->
    			</div>
    			<div>
	    			<a class="login-wrap">
	    				<i class="next-icon"></i>
	    			</a>
    			</div>
    		</div>
    	</a>
      <a v-else class="username-wrapper" href="/oauth/plus_centor">
    		<div class="user-icon" :style="{backgroundImage: 'url(' + this.avatar + ')'}"></div>
    		<div class="username-main">
    			<div class="name ellipsis"><span>{{ this.name }}</span></div>
    			<!-- <div class="authentication">
    				<span class="verify-type firm-jxs"></span>
    			</div> -->
    		</div>
    		<div class="next-main">
    			<div>
	    			<!-- <a class="login-wrap" :href="'#/oauth/login'">
	    				<span>登陆/注册</span>
	    				<i class="next-icon"></i>
	    			</a> -->
    			</div>
    			<div>
	    			<a class="login-wrap">
	    				<i class="next-icon"></i>
	    			</a>
    			</div>
    		</div>
    	</a>

    	<div class="trade-list">
    		<router-link class="trade-main" :to="{name: 'userSupplies'}">
    			<i class="trade-supply"></i>
    			<span>供应</span>
    		</router-link>
    		<router-link class="trade-main" :to="{name: 'userDemands'}">
    			<i class="trade-demand"></i>
    			<span>求购</span>
    		</router-link>
    	</div>
    	<div class="loction-wrapper">
    		<router-link class="user-list vux-1px-b" :to="{name: 'collection'}">
    			<i class="shoucang"></i>
    			<span>收藏</span>
    			<a>
    				<i class="next-more"></i>
    			</a>
    		</router-link>
    		<router-link class="user-list vux-1px-b" :to="{name: 'focus'}">
    			<i class="guanzhu"></i>
    			<span>关注</span>
    			<a>
    				<i class="next-more"></i>
    			</a>
    		</router-link>
    		<!-- <div class="user-list vux-1px-b">
    			<i class="renzheng"></i>
    			<span>认证</span>
    			<a>
    				<span>已认证</span>
    				<i class="next-more"></i>
    			</a>
    		</div>
    		<div class="user-list vux-1px-b">
    			<i class="dingdan"></i>
    			<span>成交订单</span>
    			<a>
    				<i class="next-more"></i>
    			</a>
    		</div>
    		<div class="user-list vux-1px-b">
    			<i class="advice"></i>
    			<span>意见反馈</span>
    			<a>
    				<i class="next-more"></i>
    			</a>
    		</div>
    		<div class="user-list vux-1px-b">
    			<i class="about"></i>
    			<span>关于</span>
    			<a>
    				<i class="next-more"></i>
    			</a>
    		</div> -->
    		<router-link class="user-list vux-1px-b" :to="{name: 'setting'}">
    			<i class="set"></i>
    			<span>设置</span>
    			<a>
    				<i class="next-more"></i>
    			</a>
    		</router-link>
    	</div>
    </div>
  </div>
</template>

<script>
export default {
	data(){
		return {
      DataLoading: true,
			cookie_val: [],
		}
	},
  methods: {
    direct() {
      location.href = `/user/sign_in?redirect_uri=${location.host}#/oauth/home`
    }
  },
  computed:{
    sign_in(){
      return this.$store.state.user.sign_in
    },
    name(){
      return this.$store.state.user.name
      
    },
    avatar(){
      return this.$store.state.user.avatar
    }
  }
};
</script>

<style>
@import url("../../styles/common/oauth/oauth-common.css");
.usercenter-wrapper {
  background: #eee;
}
.username-wrapper {
  padding: 12px;
  height: 100px;
  display: flex;
  background: #fff;
}
.username-wrapper .user-icon {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  margin-right: 16px;
  vertical-align: top;
  margin-top: 14px;
  background: none no-repeat scroll center center/cover rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background-image: url(../../static/oauth-img/default_avatar.jpg);
}
.username-wrapper .username-main {
  flex: 1;
  margin-top: 38px;
}
.username-main .name {
  max-width: 170px;
  font-size: 14px;
  color: #888;
  height: 25px;
  line-height: 25px;
}
.username-main .name span {
  font-size: 16px;
  color: #333;
}
.authentication {
  height: 20px;
  margin-top: 5px;
}
.authentication span {
  margin-right: 5px;
}
.username-wrapper .next-main {
  flex: 0 0 90px;
  width: 90px;
  height: 22px;
  margin-left: 5px;
  margin-top: 39px;
  display: flex;
  text-align: right;
}
.username-wrapper .next-main a {
  display: block;
  width: 90px;
  height: 22px;
}
.username-wrapper .next-main span {
  line-height: 22px;
  font-size: 14px;
  color: #888;
  flex: 1;
}
.username-wrapper .next-main i.next-icon {
  display: inline-block;
  flex: 0 0 12px;
  width: 12px;
  height: 22px;
  background: url(../../static/oauth-img/next_icon.png) no-repeat;
  background-size: 12px 22px;
  vertical-align: top;
}
.trade-list {
  background: #fff;
  padding: 12px 20px;
  margin-top: 10px;
  display: flex;
}
.trade-list .trade-main {
  display: inline-block;
  flex: 1;
  text-align: center;
}
.trade-list .trade-main i {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.trade-list .trade-main i.trade-supply {
  background: url(../../static/oauth-img/me-sale.png) no-repeat;
  background-size: 40px 40px;
}
.trade-list .trade-main i.trade-demand {
  background: url(../../static/oauth-img/me-buy.png) no-repeat;
  background-size: 40px 40px;
}
.trade-list .trade-main span {
  display: block;
  line-height: 20px;
  font-size: 16px;
  color: #333;
  margin-top: 10px;
}
.loction-wrapper {
  background: #fff;
  padding: 0 12px;
  margin-top: 10px;
}
.user-list {
  padding: 14px 0;
  height: 20px;
  display: flex;
}
.user-list i {
  display: inline-block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
}
.shoucang {
  background: url(../../static/oauth-img/shoucang.png) no-repeat;
  background-size: 20px 20px;
}
.guanzhu {
  background: url(../../static/oauth-img/guanzhu.png) no-repeat;
  background-size: 20px 20px;
}
.renzheng {
  background: url(../../static/oauth-img/renzheng.png) no-repeat;
  background-size: 20px 20px;
}
.dingdan {
  background: url(../../static/oauth-img/dingdan.png) no-repeat;
  background-size: 20px 20px;
}
.advice {
  background: url(../../static/oauth-img/advice.png) no-repeat;
  background-size: 20px 20px;
}
.about {
  background: url(../../static/oauth-img/about.png) no-repeat;
  background-size: 20px 20px;
}
.set {
  background: url(../../static/oauth-img/set.png) no-repeat;
  background-size: 20px 20px;
}
.user-list span {
  display: inline-block;
  flex: 1;
  font-size: 15px;
  color: #1c1c1c;
  line-height: 20px;
}
.user-list a {
  display: inline-block;
  flex: 0 0 100px;
  text-align: right;
}
.user-list a span {
  font-size: 15px;
  color: #ff782e;
}
.user-list a i.next-more {
  display: inline-block;
  flex: 0 0 12px;
  width: 12px;
  height: 20px;
  background: url(../../static/oauth-img/next_icon.png) no-repeat;
  background-size: 12px 20px;
  vertical-align: top;
  margin-left: 5px;
}
</style>